<template>
    <div id="durgs">
        <div class="crumbs">
            <!--导航栏-->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/welcome">
                    <i class="iconfont icon-home nav-icon"></i>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="no-active">非药品收费项目管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!--查询表单-->
            <el-form :inline="true" size="mini" :model="query" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="query.search" placeholder="请输入药品名称或助记码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="pageSearchHandler">查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="addPageHandler">添加</el-button>
                    <el-button type="info" icon="el-icon-download" @click="exportHandler">导出</el-button>
                </el-form-item>
                <el-form-item>
                    <!--
                        action: 上传的地址，这里我们通过 axios 进行代理，不直接写
                        http-request： 覆盖默认的上传行为，可以自定义上传的实现
                        show-file-list: 是否显示文件上传列表
                    -->
                    <el-upload action="" :http-request="importHandler" :show-file-list="false">
                        <el-button type="info" icon="el-icon-upload2">导入</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
        </div>
        <!--表格-->
        <div class="container table">
            <el-table :data="tableData" border stripe class="table_td">
                <el-table-column prop="id" label="编号" width="50" align="center"></el-table-column>
                <el-table-column prop="drugsCode" label="药品编码" width="135"></el-table-column>
                <el-table-column prop="drugsName" label="药品名称" width="135"></el-table-column>
                <el-table-column prop="drugsFormat" label="药品规格" width="100"></el-table-column>
                <el-table-column prop="drugsDosageId" label="药品剂型" :formatter="drugsDosageFormatter"></el-table-column>
                <el-table-column prop="drugsTypeId" label="药品类型" :formatter="drugsTypeFormatter"></el-table-column>
                <el-table-column prop="drugsPrice" label="药品单价"></el-table-column>
                <el-table-column prop="mnemonicCode" label="拼音助记码"></el-table-column>
                <el-table-column prop="drugsUnit" label="包装单位"></el-table-column>
                <el-table-column prop="createTime" label="操作时间"></el-table-column>
                <el-table-column width="110px" align="center" label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editPageBtnHandler(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
                        <el-button type="text" size="small" @click="delBtnHandler(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="table_page">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        small
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="pageIndexHandler">
                </el-pagination>
            </div>
        </div>
        <!--添加的对话框-->
        <div class="dialog">
            <el-dialog title="非药品操作" :visible.sync="dialogVisible">
                <el-form size="mini" :model="form" :rules="rules" ref="ruleForm" label-width="120px">
                    <el-form-item label="药品编码" prop="drugsCode">
                        <el-input v-model="form.drugsCode" placeholder="药品编码"></el-input>
                    </el-form-item>
                    <el-form-item label="药品名称" prop="drugsName">
                        <el-input v-model="form.drugsName" placeholder="药品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="药品规格" prop="drugsFormat">
                        <el-input v-model="form.drugsFormat" placeholder="药品规格"></el-input>
                    </el-form-item>
                    <el-form-item label="药品剂型" prop="drugsDosageId">
                        <el-select v-model="form.drugsDosageId" placeholder="药品剂型" clearable filterable>
                            <el-option v-for="item of drugsDosages" :label="item.constantName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="药品类型" prop="drugsTypeId">
                        <el-select v-model="form.drugsTypeId" placeholder="药品类型" clearable filterable>
                            <el-option v-for="item of drugsTypes" :label="item.constantName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="药品单价" prop="drugsPrice">
                        <el-input v-model.number="form.drugsPrice" placeholder="药品单价"></el-input>
                    </el-form-item>
                    <el-form-item label="包装单位" prop="drugsUnit">
                        <el-input v-model="form.drugsUnit" placeholder="包装单位"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" native-type="reset" icon="el-icon-refresh-right" >重置</el-button>
                        <el-button v-if="isEditPage" type="success" icon="el-icon-edit" @click="editBtnHandler">编辑</el-button>
                        <el-button v-else type="success" icon="el-icon-plus" @click="addBtnHandler">添加</el-button>
                        <el-button type="primary" icon="el-icon-close" @click="dialogVisible=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Durgs',
        data(){
            return {
                query:{
                    search:'',//查询条件
                    pageIndex:1, //页码
                    pageSize:10 //每页显示的条数
                },
                form:{
                    id:'',//主键ID
                    drugsCode:'', //编码
                    drugsName:'', //名称
                    drugsFormat:'', //规格
                    drugsDosageId:'', //剂型
                    drugsTypeId:'',// 类型
                    drugsPrice:'',// 单价
                    drugsUnit:''// 单位
                },
                pageTotal:0, //总条数
                tableData: [], //表格数据
                dialogVisible:false, //对话框显示标识
                isEditPage:false,//是否是为编辑页面
                drugsDosages:[],//剂型
                drugsTypes:[],//类型
                rules:{
                    drugsCode :[{ required: true, message: '请输入药品编码', trigger: 'blur' }],
                    drugsName :[{ required: true, message: '请输入药品名称', trigger: 'blur' }],
                    drugsFormat :[{ required: true, message: '请输入药品规格', trigger: 'blur' }],
                    drugsDosageId :[{ required: true, message: '请选择药品剂型', trigger: 'blur' }],
                    drugsTypeId :[{ required: true, message: '请选择药品类型', trigger: 'blur' }],
                    drugsPrice :[
                        { required: true, message: '请输入药品单价', trigger: 'blur' },
                        { type: 'number', message: '药品单价必须为数值', trigger: 'blur' }
                    ],
                    drugsUnit :[{ required: true, message: '请输入药品单位', trigger: 'blur' }]
                }
            }
        },
        methods:{
            //分页查询
            pageSearchHandler(){
                this.$api.drugs.page(this.query).then(res=>{
                    this.tableData = res.data;
                    this.pageTotal = res.total;
                });
            },
            //点击页码查询
            pageIndexHandler(index){
                this.query.pageIndex = index;
                this.pageSearchHandler();
            },
            //显示添加弹出层
            addPageHandler(){
                this.form={
                    id:'',//主键ID
                    drugsCode:'', //编码
                    drugsName:'', //名称
                    drugsFormat:'', //规格
                    drugsDosageId:'', //剂型
                    drugsTypeId:'',// 类型
                    drugsPrice:'',// 单价
                    drugsUnit:''// 单位
                };
                this.isEditPage = false;
                this.dialogVisible = true
            },
            //添加
            addBtnHandler(){
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.$api.drugs.save(this.form).then(res=>{
                            if(res.code === 200){
                                //关闭添加的弹出层
                                this.dialogVisible = false;
                                //加载列表
                                this.pageSearchHandler();
                                this.$message.success(res.msg);
                            }
                        });
                    }
                });
            },
            //删除
            delBtnHandler(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '删除提示', { type: 'warning'}).then(() => {
                    this.$api.drugs.delById(row.id).then(res=>{
                        if(res.code === 200){
                            //重新加载列表
                            this.pageSearchHandler();
                            this.$message.success(res.msg);
                        }
                    });
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            },
            //显示修改页面
            editPageBtnHandler(row){
                //给修改页面赋值
                delete row.createTime; //删除row 对象中的 createTime 字段
                this.form = row;
                this.dialogVisible= true;
                this.isEditPage = true;
            },
            //编辑
            editBtnHandler(){
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.$api.drugs.editById(this.form).then(res=>{
                            if(res.code===200){
                                this.dialogVisible=false;
                                this.pageSearchHandler();
                                this.$message.success(res.msg);
                            }
                        });
                    } else {
                        this.$message.error('请输入必填项信息');
                        return false;
                    }
                });
            },
            //药品剂型格式化
            drugsDosageFormatter(row,col,cellVal){
                let types = this.drugsDosages.filter(val=>val.id === Number.parseInt(cellVal));
                return types.length !== 0?types[0].constantName:"";
            },
            //药品类型格式化
            drugsTypeFormatter(row,col,cellVal){
                let types = this.drugsTypes.filter(val=>val.id === Number.parseInt(cellVal));
                return types.length !== 0?types[0].constantName:"";
            },
            //导入
            importHandler(data){
                // 创建表单对象
                let form = new FormData();
                // 后端接受参数 ，可以接受多个参数
                form.append("file",data.file);
                this.$api.drugs.importExcel(form).then(res=>{
                    if(res.code===200){
                        this.pageSearchHandler();
                        this.$message.success(res.msg);
                    }
                });
            },
            //导出
            exportHandler(){
                this.$api.drugs.exportExcel();
            }
        },
        mounted() {
            this.pageSearchHandler();
            //查询药品剂型
            this.$api.constant.listByConstantCode('YPJX').then(res=>{
                this.drugsDosages = res.data;
            });
            //查询药品类型
            this.$api.constant.listByConstantCode('YPLX').then(res=>{
                this.drugsTypes = res.data;
            });
        }
    };
</script>

<style scoped>

</style>